<template>
  <!-- 如果有子菜单，渲染子菜单 -->
  <el-sub-menu 
    v-if="menu.children && menu.children.length > 0" 
    :index="menu.path || menu.id.toString()"
  >
    <template #title>
      <el-icon v-if="menu.icon">
        <component :is="getIconComponent(menu.icon)" />
      </el-icon>
      <el-icon v-else>
        <component :is="getDefaultIcon(menu.type)" />
      </el-icon>
      <span>{{ menu.name }}</span>
    </template>
    
    <!-- 递归渲染子菜单 -->
    <template v-for="child in menu.children" :key="child.id">
      <menu-item :menu="child" />
    </template>
  </el-sub-menu>
  
  <!-- 如果是菜单项（type=2）且没有子菜单，渲染菜单项 -->
  <el-menu-item 
    v-else-if="menu.type === 2" 
    :index="menu.path || '/'"
  >
    <el-icon v-if="menu.icon">
      <component :is="getIconComponent(menu.icon)" />
    </el-icon>
    <el-icon v-else>
      <component :is="getDefaultIcon(menu.type)" />
    </el-icon>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script setup>
import {
  House,
  User,
  Document,
  Setting,
  Menu as MenuIcon,
  Folder,
  Operation,
  Grid,
  List,
  Files,
  DataAnalysis,
  Monitor,
  Tools,
  Management,
  UserFilled,
  DocumentCopy,
  SetUp
} from '@element-plus/icons-vue'

/**
 * 组件属性
 */
defineProps({
  menu: {
    type: Object,
    required: true
  }
})

/**
 * 图标映射表
 */
const iconMap = {
  'House': House,
  'User': User,
  'UserFilled': UserFilled,
  'Document': Document,
  'DocumentCopy': DocumentCopy,
  'Setting': Setting,
  'SetUp': SetUp,
  'Menu': MenuIcon,
  'Folder': Folder,
  'Operation': Operation,
  'Grid': Grid,
  'List': List,
  'Files': Files,
  'DataAnalysis': DataAnalysis,
  'Monitor': Monitor,
  'Tools': Tools,
  'Management': Management
}

/**
 * 获取图标组件
 * @param {String} iconName 图标名称
 * @returns {Component} 图标组件
 */
const getIconComponent = (iconName) => {
  return iconMap[iconName] || House
}

/**
 * 根据菜单类型获取默认图标
 * @param {Number} type 菜单类型
 * @returns {Component} 图标组件
 */
const getDefaultIcon = (type) => {
  switch (type) {
    case 1: // 目录
      return Folder
    case 2: // 菜单
      return MenuIcon
    case 3: // 按钮
      return Operation
    default:
      return House
  }
}
</script>

<style scoped>
/* 菜单项样式可以在这里自定义 */
</style>